<template>
  <div class="app-container">
    <el_row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>采购录入</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 500px">

            <el-container style="width: 100%">
              <el-aside style="width: 50%">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                  <el-form-item label="采购商品" prop="purchaseName">
                    <el-input v-model="form.purchaseName" placeholder="请输入采购商品" />
                  </el-form-item>
                    <el-form-item label="型号" prop="type">
                    <el-input v-model="form.type" placeholder="请输入商品型号" />
                  </el-form-item>
                  <el-form-item label="采购单价" prop="purchasePrice">
                    <el-input v-model="form.purchasePrice" placeholder="请输入采购单价" />
                  </el-form-item>
                  <el-form-item label="采购数量" prop="purchaseCount">
                    <el-input v-model="form.purchaseCount" placeholder="请输入采购数量" />
                  </el-form-item>
<!--                  <el-form-item label="采购总额" prop="purchaseMoney">-->
<!--                    <el-input v-model="form.purchaseMoney" placeholder="请输入采购总额" />-->
<!--                  </el-form-item>-->
                  <el-form-item label="采购厂家" prop="purchaseCompany">
                    <el-input v-model="form.purchaseCompany" placeholder="请输入采购厂家" />
                  </el-form-item>
                  <el-form-item label="厂家联系人" prop="companyPeople">
                    <el-input v-model="form.companyPeople" placeholder="请输入厂家联系人" />
                  </el-form-item>
                  <el-form-item label="厂家电话" prop="companyPhone">
                    <el-input v-model="form.companyPhone" placeholder="请输入厂家电话" />
                  </el-form-item>
<!--                  <el-form-item label="采购人员" prop="purchasePeople">-->
<!--                    <el-radio-group v-model="form.purchasePeople">-->
<!--                      <el-radio-->
<!--                        v-for="dict in dict.type.zs_purchase_name"-->
<!--                        :key="dict.value"-->
<!--                        :label="dict.value"-->
<!--                      >{{dict.label}}</el-radio>-->
<!--                    </el-radio-group>-->

<!--                    <el-select v-model="form.purchasePeople" placeholder="请输入交易方式" clearable size="small">-->
<!--                      <el-option-->
<!--                        v-for="dict in dict.type.zs_purchase_name"-->
<!--                        :key="dict.value"-->
<!--                        :label="dict.label"-->
<!--                        :value="dict.value"-->
<!--                      />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="交货日期" prop="goodTime">-->
<!--                    <el-date-picker clearable size="small"-->
<!--                                    v-model="form.goodTime"-->
<!--                                    type="date"-->
<!--                                    value-format="yyyy-MM-dd"-->
<!--                                    placeholder="选择交货日期">-->
<!--                    </el-date-picker>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="交易方式" prop="dealType">-->
<!--&lt;!&ndash;                    <el-radio-group v-model="form.dealType">&ndash;&gt;-->
<!--&lt;!&ndash;                      <el-radio&ndash;&gt;-->
<!--&lt;!&ndash;                        v-for="dict in dict.type.zs_money_type"&ndash;&gt;-->
<!--&lt;!&ndash;                        :key="dict.value"&ndash;&gt;-->
<!--&lt;!&ndash;                        :label="dict.value"&ndash;&gt;-->
<!--&lt;!&ndash;                      >{{dict.label}}</el-radio>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-radio-group>&ndash;&gt;-->
<!--                    <el-select v-model="form.dealType" placeholder="请输入交易方式" clearable size="small">-->
<!--                      <el-option-->
<!--                        v-for="dict in dict.type.zs_money_type"-->
<!--                        :key="dict.value"-->
<!--                        :label="dict.label"-->
<!--                        :value="dict.value"-->
<!--                      />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--&lt;!&ndash;                  <el-form-item label="发票" prop="bill">&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-input v-model="form.bill" placeholder="请输入发票" />&ndash;&gt;-->
<!--&lt;!&ndash;                  </el-form-item>&ndash;&gt;-->
<!--                  <el-form-item label="支付方式" prop="payTime">-->
<!--                      <el-select v-model="form.payTime" placeholder="请输入支付方式" clearable size="small">-->
<!--                        <el-option-->
<!--                          v-for="dict in dict.type.zs_pay_type"-->
<!--                          :key="dict.value"-->
<!--                          :label="dict.label"-->
<!--                          :value="dict.value"-->
<!--                        />-->
<!--                      </el-select>-->
<!--&lt;!&ndash;                    </el-radio-group>&ndash;&gt;-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="采购部审批人" prop="purchasePass">-->
<!--&lt;!&ndash;                    <el-radio-group v-model="form.purchasePass">&ndash;&gt;-->
<!--&lt;!&ndash;                      <el-radio&ndash;&gt;-->
<!--&lt;!&ndash;                        v-for="dict in dict.type.zs_purchase_caigoubu"&ndash;&gt;-->
<!--&lt;!&ndash;                        :key="dict.value"&ndash;&gt;-->
<!--&lt;!&ndash;                        :label="dict.value"&ndash;&gt;-->
<!--&lt;!&ndash;                      >{{dict.label}}</el-radio>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-radio-group>&ndash;&gt;-->
<!--                    <el-select v-model="form.purchasePass" placeholder="请输入交易方式" clearable size="small">-->
<!--                      <el-option-->
<!--                        v-for="dict in dict.type.zs_purchase_caigoubu"-->
<!--                        :key="dict.value"-->
<!--                        :label="dict.label"-->
<!--                        :value="dict.value"-->
<!--                      />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="财务部审批人" prop="moneyPass">-->
<!--&lt;!&ndash;                    <el-radio-group v-model="form.moneyPass">&ndash;&gt;-->
<!--&lt;!&ndash;                      <el-radio&ndash;&gt;-->
<!--&lt;!&ndash;                        v-for="dict in dict.type.zs_purchase_caiwubu"&ndash;&gt;-->
<!--&lt;!&ndash;                        :key="dict.value"&ndash;&gt;-->
<!--&lt;!&ndash;                        :label="dict.value"&ndash;&gt;-->
<!--&lt;!&ndash;                      >{{dict.label}}</el-radio>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-radio-group>&ndash;&gt;-->
<!--                    <el-select v-model="form.moneyPass" placeholder="请输入交易方式" clearable size="small">-->
<!--                      <el-option-->
<!--                        v-for="dict in dict.type.zs_purchase_caiwubu"-->
<!--                        :key="dict.value"-->
<!--                        :label="dict.label"-->
<!--                        :value="dict.value"-->
<!--                      />-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="其他说明" prop="other">-->
<!--                    <el-input v-model="form.other" type="textarea" placeholder="请输入内容" />-->
<!--                  </el-form-item>-->
                </el-form>
              </el-aside>
              <el-aside style="width: 50%">
                <el-form ref="form" :model="form" :rules="rules" label-width="110px">
<!--                  <el-form-item label="采购商品" prop="purchaseName">-->
<!--                    <el-input v-model="form.purchaseName" placeholder="请输入采购商品" />-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="型号" prop="type">-->
<!--                    <el-input v-model="form.type" placeholder="请输入商品型号" />-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="采购单价" prop="purchasePrice">-->
<!--                    <el-input v-model="form.purchasePrice" placeholder="请输入采购单价" />-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="采购数量" prop="purchaseCount">-->
<!--                    <el-input v-model="form.purchaseCount" placeholder="请输入采购数量" />-->
<!--                  </el-form-item>-->
<!--                  &lt;!&ndash;                  <el-form-item label="采购总额" prop="purchaseMoney">&ndash;&gt;-->
<!--                  &lt;!&ndash;                    <el-input v-model="form.purchaseMoney" placeholder="请输入采购总额" />&ndash;&gt;-->
<!--                  &lt;!&ndash;                  </el-form-item>&ndash;&gt;-->
<!--                  <el-form-item label="采购厂家" prop="purchaseCompany">-->
<!--                    <el-input v-model="form.purchaseCompany" placeholder="请输入采购厂家" />-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="厂家联系人" prop="companyPeople">-->
<!--                    <el-input v-model="form.companyPeople" placeholder="请输入厂家联系人" />-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="厂家电话" prop="companyPhone">-->
<!--                    <el-input v-model="form.companyPhone" placeholder="请输入厂家电话" />-->
<!--                  </el-form-item>-->
                  <el-form-item label="采购人员" prop="purchasePeople">
                    <!--                    <el-radio-group v-model="form.purchasePeople">-->
                    <!--                      <el-radio-->
                    <!--                        v-for="dict in dict.type.zs_purchase_name"-->
                    <!--                        :key="dict.value"-->
                    <!--                        :label="dict.value"-->
                    <!--                      >{{dict.label}}</el-radio>-->
                    <!--                    </el-radio-group>-->

                    <el-select v-model="form.purchasePeople" placeholder="请输入交易方式" clearable size="small">
                      <el-option
                        v-for="dict in dict.type.zs_purchase_name"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="交货日期" prop="goodTime">
                    <el-date-picker clearable size="small"
                                    v-model="form.goodTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择交货日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="交易方式" prop="dealType">
                    <!--                    <el-radio-group v-model="form.dealType">-->
                    <!--                      <el-radio-->
                    <!--                        v-for="dict in dict.type.zs_money_type"-->
                    <!--                        :key="dict.value"-->
                    <!--                        :label="dict.value"-->
                    <!--                      >{{dict.label}}</el-radio>-->
                    <!--                    </el-radio-group>-->
                    <el-select v-model="form.dealType" placeholder="请输入交易方式" clearable size="small">
                      <el-option
                        v-for="dict in dict.type.zs_money_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <!--                  <el-form-item label="发票" prop="bill">-->
                  <!--                    <el-input v-model="form.bill" placeholder="请输入发票" />-->
                  <!--                  </el-form-item>-->
                  <el-form-item label="支付方式" prop="payTime">
                    <el-select v-model="form.payTime" placeholder="请输入支付方式" clearable size="small">
                      <el-option
                        v-for="dict in dict.type.zs_pay_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                    <!--                    </el-radio-group>-->
                  </el-form-item>
                  <el-form-item label="采购部审批人" prop="purchasePass" >
                    <!--                    <el-radio-group v-model="form.purchasePass">-->
                    <!--                      <el-radio-->
                    <!--                        v-for="dict in dict.type.zs_purchase_caigoubu"-->
                    <!--                        :key="dict.value"-->
                    <!--                        :label="dict.value"-->
                    <!--                      >{{dict.label}}</el-radio>-->
                    <!--                    </el-radio-group>-->
                    <el-select v-model="form.purchasePass" placeholder="请输入交易方式" clearable size="small">
                      <el-option
                        v-for="dict in dict.type.zs_purchase_caigoubu"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="财务部审批人" prop="moneyPass">
                    <!--                    <el-radio-group v-model="form.moneyPass">-->
                    <!--                      <el-radio-->
                    <!--                        v-for="dict in dict.type.zs_purchase_caiwubu"-->
                    <!--                        :key="dict.value"-->
                    <!--                        :label="dict.value"-->
                    <!--                      >{{dict.label}}</el-radio>-->
                    <!--                    </el-radio-group>-->
                    <el-select v-model="form.moneyPass" placeholder="请输入交易方式" clearable size="small">
                      <el-option
                        v-for="dict in dict.type.zs_purchase_caiwubu"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="其他说明" prop="other">
                    <el-input v-model="form.other" type="textarea" placeholder="请输入内容" />
                  </el-form-item>
                </el-form>
              </el-aside>
            </el-container>
            <div slot="footer" class="dialog-footer" >
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
            </div>
        </el-card>
      </el-col>
    </el_row>
  </div>
</template>
<script>
import { addProcess } from "@/api/purchase/enter";

export default {
  name: "Enter",
  dicts: [ 'zs_money_type', 'zs_pay_type', 'zs_purchase_name', 'zs_purchase_caiwubu', 'zs_purchase_caigoubu',],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // purchase表格数据
      processList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        purchaseName: null,
        type: null,
        purchasePrice: null,
        purchaseCount: null,
        purchaseMoney: null,
        purchaseCompany: null,
        companyPeople: null,
        companyPhone: null,
        purchasePeople: null,
        goodTime: null,
        dealType: null,
        bill: null,
        payTime: null,
        purchasePass: null,
        moneyPass: null,
        other: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "采购订单id不能为空", trigger: "blur" }
        ],
        purchaseName: [
          { required: true, message: "采购商品不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "型号不能为空", trigger: "change" }
        ],
        purchasePeople: [
          { required: true, message: "采购人员不能为空", trigger: "blur" }
        ],
        purchasePass: [
          { required: true, message: "采购部审批不能为空", trigger: "blur" }
        ],
        moneyPass: [
          { required: true, message: "财务部审批不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询purchase列表 */
    getList() { this.reset();},
    // 取消按钮=
    cancel() {
      this.open = false;
      this.reset();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            addProcess(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
             // this.getList();
            });
          }
      });
      this.$router.push({path: '/detail3'})
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        purchaseName: null,
        type: null,
        purchasePrice: null,
        purchaseCount: null,
        purchaseMoney: null,
        purchaseCompany: null,
        companyPeople: null,
        companyPhone: null,
        purchasePeople: null,
        goodTime: null,
        dealType: null,
        bill: null,
        payTime: null,
        purchasePass: null,
        moneyPass: null,
        other: null
      };},
    /** 导出按钮操作 */
    handleExport() {
      this.download('purchase/process/export', {
        ...this.queryParams
      }, `process_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped>

</style>
